<template>
  <div class="item-box f--h">
    <div class="item-avatar">
      <img class="item-avatar-img" :src="userInfo.avatarUrl" background-size="cover" />
    </div>
    <div class="item-content f--s flex-1">
      <div class="item-name-label f--s">
        <div class="item-name">{{userInfo.nickName}}</div>
        <div class="item-label-box">
          <div class="label-item" v-if="data.tag_one">{{data.tag_one}}</div>
          <div class="label-item" v-if="data.tag_two">{{data.tag_two}}</div>
          <div class="label-item" v-if="data.tag_three">{{data.tag_three}}</div>
          <!--<div class="label-item" v-for="(item,index) in data.labelList" :key="index">{{item}}</div>-->
        </div>
      </div>
      <div class="item-content-text">{{data.content}}</div>
      <div class="item-imglist-box" v-if="data.img_list">
        <div class="img-item-box" v-for="(item,index) in data.img_list" :key="index">
          <img class="img-item-img" @click="showPics(item)" :src="item"/>
        </div>
      </div>
      <div class="item-video-box" v-if="data.video_url">
        <video class="item-video" :src="data.video_url"   controls ></video>
      </div>
      <div class="item-content-footer">
        <div class="item-content-time">{{data.created_at}}</div>
        <div class="item-content-copy" @click="copyText(data.content)"  >复制文案</div>
        <div class="item-content-save" @click="saveData" >一键保存</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'comment-item',
    props: {
      data: {
        type: Object
      },
    },
    computed: {
      userInfo () {
        return this.$store.state.theUserInfo
      },
    },
    methods: {
      showPics: function (item) {
        wx.previewImage({
          current: item,
          urls: this.data.img_list
        })
      },
      copyText: function (text) {
        wx.setClipboardData({
          data: text,
          success: function(res) {
            wx.getClipboardData({
              success: function(res) {
                console.log(res.data) // data
              }
            })
          }
        })
      },
      saveImgs: function (imageList) {
        imageList.map(v=>{
          wx.downloadFile({
            url: v,
            success: function(res) {
              wx.saveImageToPhotosAlbum({      //保存图片到本地
                filePath:res.tempFilePath,
                success(res){
                  wx.showToast({title:"保存成功"});
                }
              })
            }
          })
        })
      },
      saveVideo: function(videoUrl){
        wx.downloadFile({
          url: videoUrl,
          success(res){
            wx.saveVideoToPhotosAlbum({
              filePath:res.tempFilePath,
              success(res){
                wx.showToast({title:"保存成功"});
              }
            })
          },
          fail(res) {
            console.log(res);
          }
        })
      },
      saveData: function() {
        let _this = this;
        wx.getSetting({     //查看是否开启保存相册的权限
          success(res){
            if(!res.authSetting['scope.writePhotosAlbum']) {  //如果没有开启，则开启
              wx.authorize({        //开启权限
                scope:'scope.writePhotosAlbum',
                success(res){
                  console.log('授权成功');
                  if(_this.data.img_list) {
                    _this.saveImgs(_this.data.img_list);
                  }
                  if(_this.data.video_url) {
                    _this.saveVideo(_this.data.video_url);
                  }
                }
              })
            }else {
              if(_this.data.img_list) {
                _this.saveImgs(_this.data.img_list);
              }
              if(_this.data.video_url) {
                _this.saveVideo(_this.data.video_url);
              }
            }
          }
        });
      },
    }
  }
</script>

<style type="text/scss" lang="scss">
.item-box {
  position: relative;
  display: flex;
  padding-right: 40rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  margin-bottom: 40rpx;
  .item-avatar {
    width: 140rpx;
    .item-avatar-img{
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
    }
  }
  .item-content {
    .item-name-label {
      .item-name {
        color: #ab1b23;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 28rpx;
      }
      .item-label-box {
        line-height: 34rpx;
        margin-bottom: 10rpx;
        .label-item {
          font-size: 18rpx;
          line-height:34rpx;
          border: 1px solid #ab1b23;
          color: #ab1b23;
          display: inline-block;
          padding: 0 20rpx;
          margin: 10rpx 10rpx 2rpx 0;
          border-radius: 6rpx;
        }
      }
    }
    .item-content-text {
      line-height: 64rpx;
      font-size: 28rpx;
    }
    .item-imglist-box {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      position: relative;
      box-sizing: border-box;
      .img-item-box{
        height: 224rpx;
        box-sizing: border-box;
        background-color: white;
        flex: 0 0 31%;
        margin-right: 2%;
        position: relative;
        overflow: hidden;
        margin-bottom: 16rpx;
        .img-item-img {
          max-width: 100%;
          width: 100%;
          height: auto;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
    .item-video-box {
      .item-video {
        width: 100%;
      }
    }
    .item-content-footer {
      position: relative;
      margin-bottom: 24rpx;
      .item-content-time {
        font-size: 24rpx;
        line-height: 54rpx;
        color: #aaa;
      }
      .item-content-copy ,.item-content-save{
        position: absolute;
        top: 10rpx;
        padding: 0 20rpx;
        background: #ab1b23;
        color: #fff;
        font-size: 24rpx;
        line-height: 46rpx;
        border-radius: 6rpx;
      }
      .item-content-copy {
        right: 160rpx;
      }
      .item-content-save {
        right: 0rpx;
      }
    }
  }

}
</style>
